
<template>
    <li>
        <groupItem v-for="(item,index) in data" :key="index">
            <div v-if="!item.children" class="list">
                <el-button type="primary" size="small" :class="{'isfrist':item.pid != 0}">{{item.attributes.className}}</el-button>
                <div class="rightBtns">
                    <el-button size="small" @click="addChirlden(item.id)">创建子分组</el-button>
                    <span class="icon-bianji icon" @click.stop="editGrouping(item)"></span>
                    <span class="icon-delete_icon icon" @click.stop="remove(item.id)"></span>
                    <span class="el-icon-rank icon"></span>
                </div>
            </div>
            <template v-else>
                <div class="list" @click="handleToggleShow">
                    <el-button type="primary" size="small" :class="{'isfrist':item.pid != 0}">{{item.attributes.className}}</el-button>
                    <div class="rightBtns">
                        <el-button size="small" class=""  @click="addChirlden(item.id)">创建子分组</el-button>
                        <span class="icon-bianji icon" @click.stop="editGrouping(item)"></span>
                        <span class="icon-delete_icon icon" @click.stop="remove(item.id)"></span>
                        <span class="el-icon-rank icon"></span>
                    </div>
                </div>
                    <ul>
                        <group :data="item.children" v-if="!toggleShow"></group>
                    </ul>
            </template>
        </groupItem>
    </li>
</template>

<script>
import groupItem from './groupItem'
import { saveCustType,editCustType, deleteCustType } from '@/api/customer'
export default {
    name: "group",
    props: {
        data: Array
    },
    data() {
        return {
            toggleShow: false
        }
    },
    methods: {
        handleToggleShow() {
        // 处理 toggle 状态的是否展开子菜单 handler
            this.toggleShow = !this.toggleShow;
        },
        addChirlden(pid) { // 添加子分组
            this.$prompt('请输入分组名', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                }).then(({ value }) => {
                    saveCustType(value,pid).then(res => {
                        console.log
                    })

                this.$message({
                    type: 'success',
                    message: '你的邮箱是: ' + value
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消输入'
                });
            });
        },
        remove(id) { // 删除
        this.$confirm('删除该分组后，该分组下的所有客户将自动移动到【我的客户】?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: "success"
            }).then(() => {
                deleteCustType(id).then(res => {
                    if(res.data.success) {
                        this.$message({
                            type:'success',
                            message:res.data.msg
                        })
                        this.bus.$emit('updata')
                    }
                })
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消删除'
            });
        });
        },
        editGrouping(item) {
            this.$prompt('请输入分组名', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputValue: item.attributes.className
                }).then(({ value }) => {
                    editCustType(value,item.id).then(res => {
                        if(res.data.success) {
                            this.$message({
                                type:'success',
                                message:res.data.msg
                            })
                            this.bus.$emit('updata')
                        }
                    })

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消输入'
                });
            });
        }
    },
    components: {
        groupItem
    },
    watch: {
        data(value) {
            this.menu = value
        }
    },
};
</script>

<style lang="scss" scoped>
.list{
  display:flex;
  justify-content: space-between;
  align-items: center;
  /* padding-right 20px; */
  padding: 20px;
  box-sizing: border-box;
  border-radius: 7px 7px 0 0;
//   border-bottom: 2px solid #F3F3F3;
  position: relative;
}
.list:hover{
  background: #E9F3FD;
  }
.icon{
    font-size: 22px;
    margin: 0 10px
}
ul {
    list-style: none;
    margin: 10px 0;
    position: absolute;
}

li {
    padding-left: 30px;
    position:relative;
}
.isfrist{
    background-color:#F5F5F5;
    color:#778088;
    border-color:#F5F5F5;
}
.rightBtns{
    display:flex;
    align-items: center;
}
</style>
